<!--
@license
Copyright 2020 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../paper-button/paper-button.html" />
<link rel="import" href="../tf-imports/polymer.html" />

<!--
  A frontend that directs users to upgrade to the new version of the
  profile plugin, now distributed separately from TensorBoard.
-->
<dom-module id="tf-profile-redirect-dashboard">
  <template>
    <div class="message">
      <h3>The profile plugin has moved.</h3>
      <p>
        Please install the new version of the profile plugin from PyPI by
        running the following command from the machine running TensorBoard:
      </p>
      <textarea
        id="commandTextarea"
        readonly
        rows="1"
        on-blur="_removeCopiedMessage"
      >
[[_installCommand]]</textarea
      >
      <div id="copyContainer">
        <span id="copiedMessage"></span>
        <paper-button raised on-tap="_copyInstallCommand"
          >Copy to clipboard</paper-button
        >
      </div>
    </div>

    <style>
      .message {
        margin: 80px auto 0 auto;
        max-width: 540px;
      }
      #commandTextarea {
        margin-top: 1ex;
        padding: 1ex 1em;
        resize: vertical;
        width: 100%;
      }
      #copyContainer {
        display: flex;
      }
      #copiedMessage {
        align-self: center;
        flex-grow: 1;
        font-style: italic;
        padding-right: 1em;
        text-align: right;
      }
    </style>
  </template>

  <script>
    (function() {
      Polymer({
        is: 'tf-profile-redirect-dashboard',
        properties: {
          _installCommand: {
            type: String,
            readOnly: true,
            value: 'pip install -U tensorboard_plugin_profile',
          },
        },
        async _copyInstallCommand() {
          const doCopy = async () => {
            const textarea = this.$.commandTextarea;
            textarea.select();
            try {
              await navigator.clipboard.writeText(this._installCommand);
            } catch (error) {
              // Fallback approach.
              if (!document.execCommand('copy')) {
                return Promise.reject();
              }
            }
          };
          try {
            await doCopy();
            this.$.copiedMessage.innerText = 'Copied.';
          } catch (e) {
            this.$.copiedMessage.innerText = 'Failed to copy to clipboard.';
          }
        },
        _removeCopiedMessage() {
          this.$.copiedMessage.innerText = '';
        },
      });
    })();
  </script>
</dom-module>
